﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简洁的js和CSS3多级导航菜单</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/bootsnav.css">
	<style type="text/css">
		.demo{ background: #a93538;padding: 2em 0; }
		nav.navbar.bootsnav{
		    border: none;
		    background: none;
		    margin-bottom: 150px;
		}
		nav.navbar.bootsnav ul.nav > li{
		    margin-right: 10px;
		}
		nav.navbar.bootsnav ul.nav > li:before{
		    content: "";
		    width: 2px;
		    height: 0;
		    background: #fff;
		    margin: 0 auto;
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    transition: all 0.5s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li:hover:before{ height: 25px; }
		nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{ left: 11.3%; }
		nav.navbar.bootsnav ul.nav > li:after{
		    content: "";
		    width: 10px;
		    height: 10px;
		    border-radius: 50%;
		    background: #fff;
		    margin: 0 auto;
		    position: absolute;
		    bottom: 70px;
		    left: 0;
		    right: 0;
		    opacity: 0;
		    transition: all 0.5s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li:hover:after{
		    bottom: 20px;
		    opacity: 1;
		}
		nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{ left: 11.3%; }
		nav.navbar.bootsnav ul.nav > li > a{
		    padding: 15px 15px 35px 15px;
		    margin: 0;
		    color: #fff;
		    text-transform: uppercase;
		    z-index: 1;
		    transition: all 0.5s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown > a{
		    padding: 15px 30px 35px 15px;
		}
		nav.navbar.bootsnav ul.nav > li > a:hover{ color: #fff; }
		nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
		    position: absolute;
		    margin: 0 0 0 7px;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown > ul{
		    top: 120%;
		    transition: all 0.8s ease 0s;
		}
		nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{
		    top: 100%;
		}
		.dropdown-menu.multi-dropdown{
		    position: absolute;
		    left: -100% !important;
		}
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		    border: none;
		}
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{
		    font-size: 14px;
		    color: #6f6f6f;
		}
		nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
		    font-size: 16px;
		    font-weight: bold;
		    color: #3f3f3f;
		}
		@media only screen and (max-width:990px){
		    .dropdown-menu.multi-dropdown{ left: 0 !important; }
		    nav.navbar.bootsnav .navbar-toggle{
		        background: none;
		        color: #fff;
		    }
		    nav.navbar.bootsnav ul.nav > li{
		        margin-right: 0;
		    }
		    nav.navbar.bootsnav ul.nav > li:before{
		        width: 0;
		        height: 2px;
		        background: #dca342;
		        margin: 0;
		        bottom: 50%;
		        left: 0;
		    }
		    nav.navbar.bootsnav ul.nav > li:hover:before{
		        width: 25px;
		        height: 2px;
		    }
		    nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{
		        left: 0;
		        bottom: 52%;
		    }
		    nav.navbar.bootsnav ul.nav > li:after,
		    nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{
		        background: #dca342;
		        margin: 0;
		        bottom: 50%;
		        left: auto;
		        right: 0;
		    }
		    nav.navbar.bootsnav ul.nav > li:hover:after{
		        bottom: 42%;
		        right: 90%;
		    }
		    nav.navbar.bootsnav ul.nav > li:hover.megamenu-fw:after{
		        bottom: 51.3%;
		    }
		    nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{
		        padding: 15px;
		        text-align: center;
		    }
		    nav.navbar.bootsnav ul.nav > li > a,
		    nav.navbar.bootsnav ul.nav > li > a:hover{
		        color: #333;
		    }
		    nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; }
		    nav.navbar.bootsnav ul.nav > li.dropdown.on:before,
		    nav.navbar.bootsnav ul.nav > li.dropdown.on:after{
		        display: none;
		    }
		    nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
		        font-size: 14px;
		        font-weight: normal;
		    }
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>简洁的js和CSS3多级导航菜单 <span>JS + CSS3 Menu Style</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="demo">
		        <div class="container">
		            <div class="row">
		                <div class="col-md-12">
		                    <nav class="navbar navbar-default navbar-mobile bootsnav">
		                        <div class="navbar-header">
		                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
		                                <i class="fa fa-bars"></i>
		                            </button>
		                        </div>
		                        <div class="collapse navbar-collapse" id="navbar-menu">
		                            <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
		                                <li><a href="#" data-hover="Home">Home</a></li>
		                                <li><a href="#" data-hover="About">About</a></li>
		                                <li class="dropdown">
		                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">Shortcodes</a>
		                                    <ul class="dropdown-menu">
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li class="dropdown">
		                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
		                                            <ul class="dropdown-menu">
		                                                <li><a href="#">Custom Menu</a></li>
		                                                <li><a href="#">Custom Menu</a></li>
		                                                <li class="dropdown">
		                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
		                                                    <ul class="dropdown-menu multi-dropdown">
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                    </ul>
		                                                </li>
		                                                <li><a href="#">Custom Menu</a></li>
		                                            </ul>
		                                        </li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                    </ul>
		                                </li>
		                                <li class="dropdown">
		                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Pages">Pages</a>
		                                    <ul class="dropdown-menu">
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li class="dropdown">
		                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
		                                            <ul class="dropdown-menu">
		                                                <li><a href="#">Custom Menu</a></li>
		                                                <li><a href="#">Custom Menu</a></li>
		                                                <li class="dropdown">
		                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
		                                                    <ul class="dropdown-menu multi-dropdown">
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                        <li><a href="#">Custom Menu</a></li>
		                                                    </ul>
		                                                </li>
		                                                <li><a href="#">Custom Menu</a></li>
		                                            </ul>
		                                        </li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                        <li><a href="#">Custom Menu</a></li>
		                                    </ul>
		                                </li>
		                                <li><a href="#" data-hover="Portfolio">Portfolio</a></li>
		                                <li class="dropdown megamenu-fw">
		                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu</a>
		                                    <ul class="dropdown-menu megamenu-content" role="menu">
		                                        <li>
		                                            <div class="row">
		                                                <div class="col-menu col-md-3">
		                                                    <h6 class="title">Title Menu One</h6>
		                                                    <div class="content">
		                                                        <ul class="menu-col">
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                        </ul>
		                                                    </div>
		                                                </div><!-- end col-3 -->
		                                                <div class="col-menu col-md-3">
		                                                    <h6 class="title">Title Menu Two</h6>
		                                                    <div class="content">
		                                                        <ul class="menu-col">
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                        </ul>
		                                                    </div>
		                                                </div><!-- end col-3 -->
		                                                <div class="col-menu col-md-3">
		                                                    <h6 class="title">Title Menu Three</h6>
		                                                    <div class="content">
		                                                        <ul class="menu-col">
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                        </ul>
		                                                    </div>
		                                                </div>
		                                                <div class="col-menu col-md-3">
		                                                    <h6 class="title">Title Menu Four</h6>
		                                                    <div class="content">
		                                                        <ul class="menu-col">
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                            <li><a href="#">Custom Menu</a></li>
		                                                        </ul>
		                                                    </div>
		                                                </div><!-- end col-3 -->
		                                            </div><!-- end row -->
		                                        </li>
		                                    </ul>
		                                </li>
		                                <li><a href="#" data-hover="Contact">Contact</a></li>
		                            </ul>
		                        </div>
		                    </nav>
		                </div>
		            </div>
		        </div>
		    </div>

	</div>
	
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootsnav.js"></script>
</body>
</html>